<template>
  <div>
    <h1>upload组件的使用</h1>
    <!--
      action: 设置图片上传的接口地址
      list-type	文件列表的类型 --- 样式
      http-request：覆盖action属性，自定义上传文件夹
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="uploadFn"
    >
      <i class="el-icon-plus" />
    </el-upload>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
// 初始化cos对象
var cos = new COS({
  SecretId: 'AKIDsZ2GExRgfPuAAxUmpcATWKsAD1atzrUr',
  SecretKey: 'A5kBOL2UgdKmyvd5HEvNZVEiwwhDTUGn'
})
export default {
  methods: {
    uploadFn(data) {
      // data里面的file对象才是真正上传给后端的图片对象
      console.log(data)
      // 调用腾讯云提供的上传文件的方法，实现图片上传
      cos.putObject({
        Bucket: 'hr-78-1259170259', /* 必须 -- 储存桶名字 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: (Date.now()).toString(), /* 必须 -- 上传到腾讯云后的文件名 -- 字符串 */
        StorageClass: 'STANDARD',
        Body: data.file, // 上传文件对象
        onProgress: function(progressData) {
          console.log(JSON.stringify(progressData))
        }
      }, function(err, data) {
        console.log(err || data)
      })
    }
  }
}
</script>

<style scoped>

</style>
